<template>
  <div>
    <div
      class="history"
      v-if="isShowHistory"
    >
      <div class="top">
        <h4>历史记录</h4>
        <van-icon
          name="delete-o"
          @click="deleteIconClick"
        />
      </div>
      <div class="down">
        <van-tag
          plain
          type="default"
          v-for="(item,index) in historyKeywordList"
          :key="index"
          @click="onHistoryClick(item)"
        >{{item}}</van-tag>
      </div>
    </div>
    <div class="history">
      <div class="top">
        <h4>热门搜索</h4>
      </div>
      <div class="down">
        <van-tag
          plain
          :type="item.is_hot==1?'danger':'default'"
          v-for="(item,index) in hotKeywordList"
          :key="index"
          @click="onHotClick(item.keyword)"
        >{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { ClearSearchHistory } from "../../request/api";

export default {
  props: ["historyKeywordList", "hotKeywordList"],
  emits: ["handleHistoryClick", "handleHotClick"],
  data() {
    return {
      //是否显示搜索历史记录
      isShowHistory: true,
    };
  },
  methods: {
    onHistoryClick(value) {
      //谢特，直接点击时传入循环的item啊，我还饶了一圈传入个索引值，醉了醉了。。。
      // let tagValue = this.historyKeywordList[index];
      // this.$emit("handleHistoryClick", index);
      this.$emit("handleHistoryClick", value);
    },
    onHotClick(value) {
      this.$emit("handleHotClick", value);
    },
    //清除搜索历史记录
    async deleteIconClick() {
      const confirmResult = await this.$dialog
        .confirm({
          message: "请确认删除！",
        })
        .catch((err) => err);
      // console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$toast("取消删除！");
      }
      const res = await ClearSearchHistory();
      if (res.errno !== 0) {
        return this.$toast("删除失败！");
      }
      this.$toast.success("删除成功！");
      this.isShowHistory = false;

      // console.log(res);
    },
  },
};
</script>

<style lang='less' scoped>
.history {
  padding: 0 0.1rem;
  background-color: #fff;
  margin-bottom: 0.12rem;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.4rem;
    h4,
    .van-icon {
      font-size: 0.18rem;
    }
  }
  .down {
    padding-bottom: 0.05rem;
    .van-tag {
      margin-right: 0.05rem;
      margin-bottom: 0.05rem;
      font-size: 0.12rem;
      transform: scale(0.9);
      padding-top: 0.01rem;
      padding-bottom: 0.01rem;
    }
  }
}
</style>